<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>慕课网-登录</title>
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2636378_cwouzwudqkw.css">
    <script src="../jquery-3.6.0.js"></script>
    <script src="../template-web.js"></script>
    <link rel="stylesheet" href="./css/登录.css样式.css">

    <script src="./js/登录js.样式.js"></script>
    <script src="/BASE_API.js"></script>
</head>

<body>

    <!-- 头部1 -->
    <div id="head" class="sig-head">
        <a href="#;" class="sig-img"></a>
    </div>


    <div class="main">

        <div class="login-wrap">

            <!-- style="display: none;" -->
            <!-- 账号中间与验证码登录 -->
            <!-- 账号登录 -->
            <div id="signin" class="rl-modal">

                <div class="rl-modal-header">
                    <h1>
                        <span class="active-title ">账号登录</span>
                        <span class="xa-showPhoneSignin  ">验证码登录</span>
                    </h1>
                </div>
                <!-- 上半身登录验证 -->
                <div class="rl-modal-body">
                    <div class="clearfix">
                        <form id="signup-form">

                            <!-- 登录 -->
                            <div class="rlf-group pr">
                                <input type="text" value="" class="xa-emailOrPhone ipt " placeholder="请输入登录手机号/邮箱">

                                <!-- 账号验证判断登录失败弹出这个 -->
                                <p class="rlf-tip-wrap errorHint color-red" style="display: none;">请输入正确的邮箱或手机号</p>

                            </div>
                            <!-- 密码 -->
                            <div class="rlf-group  pr has-error" style="margin-top: 6px;">
                                <a href="javascript:void(0)" class="proclaim-btn iconfont icon-yanjing">

                                </a>
                                <input type="password" class="ipt ipt-pwd " placeholder="请输入密码">
                                <!-- 密码验证判断登录失败弹出这个 -->
                                <p class="rlf-tip-wrap errorHint color-red " style="display: none;">
                                    请输入6-20位密码，区分大小写，不能使用空格！</p>
                            </div>

                            <!-- 单选框部分 -->
                            <div class="rlf-group  form-control  clearfix">
                                <!-- 左边 -->
                                <label for="auto-signin" class="rlf-autoin l">
                                    <!-- 单选框默认  checked='checked' -->
                                    <input type="checkbox" checked='checked' class="auto-cbx" id="auto-signin">7天内自动登录

                                </label>
                                <!-- 右边 -->
                                <div class="fle-rlf r ">
                                    <a href="#;" class="rlf-forget ">忘记密码</a>
                                    <div class="rlf-line"></div>
                                    <a href="#;" class="rlf-forget">遇到问题</a>
                                </div>

                            </div>

                            <!-- 红色登录按钮部分 -->
                            <div class="rlf-group ">
                                <input type="button" value="登录" class="moco-btn moco-btn-red  xa-login">
                            </div>
                        </form>
                    </div>
                </div>

                <!-- 下半身快速注册 -->
                <div class="rl-model-footer">

                    <!-- 快速注册按钮 -->
                    <div class="pop-login-signup-box">
                        <span class="xa-showSignup">快速注册</span>
                    </div>

                    <!-- 下面三张图片 点击弹出扫码登录 -->
                    <div class="pop-login-sns ">
                        <a href="javascript:void(0)" class="pop-sns-weixin">
                            <i class="iconfont icon-weixin2"></i>
                        </a>
                        <a href="javascript:void(0)" class="pop-sns-qq">
                            <i class="iconfont icon-qq"></i>
                        </a>
                        <a href="javascript:void(0)" class="pop-sns-weibo">
                            <i class="iconfont icon-weibo">

                            </i>
                        </a>
                    </div>

                    <!-- 《隐私政策》 -->
                    <div class="privacy_tip">登录即同意慕课网
                        <a href="#;">《隐私政策》</a>
                    </div>

                    <!-- 右下角二维码 -->
                    <div class="erweima xa-showQrcode">

                    </div>
                </div>

            </div>

            <!-- 验证码登录-->
            <div class="rl-modal-dl" style="display: none;">
                <div class="rl-modal-header">
                    <h1>
                        <span class="xa-showPhoneSignin">账号登录</span>
                        <span class="active-title ">验证码登录</span>
                    </h1>
                </div>
                <!-- 上部分 -->
                <div class="rl-modal-body clearfix">
                    <form class="signup-form">
                        <!--短信验证登录 -->
                        <div class="rlf-group">
                            <div class="rlf-areacode">+86</div>
                            <input type="text" value="" class="ipt ipt-phone" placeholder="短信登录仅限中国大陆用户">
                        </div>
                        <!-- 获取验证码登录 -->
                        <div class="rlf-group">
                            <input type="text" id="js-phoneVerity" class="ipt ipt-pwd" placeholder="请输入短信验证码">
                            <p class="reSend-e active ">
                                <span class="js-signin-send">获取验证码</span>
                            </p>

                        </div>

                        <!-- 找回账号 -->
                        <div class="rlf-group rlf-appendix  clearfix" style="margin-top: 20px;margin-bottom: 10px;">
                            <label for="auto-signin" class="rlf-autoin ">
                                <input type="checkbox" checked="checked" class="auto-cbx" id="auto-signin">7天内自动登录
                            </label>
                            <a href="#;" class="rlf-forget r">找回账号</a>
                        </div>

                        <!-- 登录部分 -->
                        <div class="rlf-group clearfix">
                            <input type="button" value="登录" class="moco-btn moco-btn-red ">
                        </div>
                    </form>
                </div>
                <!-- 下部分 -->
                <div class="rl-model-footer">

                    <!-- 快速注册按钮 -->
                    <div class="pop-login-signup-box">
                        <span class="xa-showSignup">快速注册</span>
                    </div>

                    <!-- 下面三张图片 点击弹出扫码登录 -->
                    <div class="pop-login-sns ">
                        <a href="javascript:void(0)" class="pop-sns-weixin">
                            <i class="iconfont icon-weixin2"></i>
                        </a>
                        <a href="javascript:void(0)" class="pop-sns-qq">
                            <i class="iconfont icon-qq"></i>
                        </a>
                        <a href="javascript:void(0)" class="pop-sns-weibo">
                            <i class="iconfont icon-weibo">

                            </i>
                        </a>
                    </div>

                    <!-- 《隐私政策》 -->
                    <div class="privacy_tip">登录即同意慕课网
                        <a href="#;">《隐私政策》</a>
                    </div>

                    <!-- 右下角二维码 -->
                    <div class="erweima xa-showQrcode">

                    </div>
                </div>
            </div>

            <!-- 快速注册中间 -->
            <!--  -->
            <div id="signup" class="rl-model-signup" style="display: none;">
                <div class="rl-modal-header">
                    <h1 class="black-title">快速注册</h1>
                </div>

                <div class="rl-modal-body">
                    <!-- 验证功能区 -->
                    <form id="signup-form " class="signup-form">
                        <!-- 注册手机号 -->
                        <div class="rlf-group-e ">
                            <div class="rlf-areacode l">+
                                <span>86</span>
                                <i class="iconfont icon-xuanze-xianxing3-0"></i>
                            </div>
                            <input type="text" value="" placeholder="请输入注册手机号" class="ipt-phone">

                        </div>
                        <!-- 验证码 -->
                        <div class="rlf-group-e">
                            <input type="text" id="js-phoneVerity" class="ipt-pwd" placeholder="请输入短信验证码">
                            <p class="reSend  active">
                                <span class="js-signup-send">获取验证码</span>

                            </p>
                            <p class="subtitle" style="display: none">短信验证码已发送至手机
                                <span class="js-phoneNumber"></span>
                            </p>
                        </div>

                        <div class="rlf-group-e rlf-appendix  " style="padding: 6px;">
                            <label for="signup-protocol" class="rlf-autoin">
                                <input type="checkbox" class="auto-cbx" id="signup-protocol">同意
                                <a class="ipt-agreement" href="#;">《慕课网注册协议》</a>&amp;
                                <a href="#;" class="ipt-agreement">《隐私政策》</a>
                            </label>
                        </div>
                        <!-- 验证通过就可以点击立即注册， 就会注册成功-->
                        <div class="rlf-group-e ">
                            <a href="javascript:void(0)" id="signup-btn" class="moco-btn moco-btn-red">
                                立即注册
                            </a>
                        </div>
                    </form>

                    <!-- 返回登录 -->
                    <div class="rl-model-footer">
                        <div class="pop-login-signup-box ">
                            <span class="xa-showSignin">
                                返回账号登录
                            </span>
                        </div>
                        <div class="pop-login-sns ">
                            <a href="javascript:void(0)" class="pop-sns-weixin">
                                <i class="iconfont icon-weixin2"></i>
                            </a>
                            <a href="javascript:void(0)" class="pop-sns-qq">
                                <i class="iconfont icon-qq"></i>
                            </a>
                            <a href="javascript:void(0)" class="pop-sns-weibo">
                                <i class="iconfont icon-weibo"></i>
                            </a>
                        </div>
                    </div>

                    <!--电话区号箱 -->
                    <div class="areacode-box js-code-box" a='false' style="display: none;">
                        <ul class="code-tab">
                            <li class="curr js-code-tab">常用</li>
                            <li class="js-code-tab">A</li>
                            <li class="js-code-tab">B</li>
                            <li class="js-code-tab">C</li>
                            <li class="js-code-tab">D</li>
                            <li class="js-code-tab">E</li>
                            <li class="js-code-tab">F</li>
                            <li class="js-code-tab">G</li>
                            <li class="js-code-tab">H</li>
                            <li class="js-code-tab">J</li>
                            <li class="js-code-tab">K</li>
                            <li class="js-code-tab">L</li>
                            <li class="js-code-tab">M</li>
                            <li class="js-code-tab">N</li>
                            <li class="js-code-tab">P</li>
                            <li class="js-code-tab">R</li>
                            <li class="js-code-tab">S</li>
                            <li class="js-code-tab">T</li>
                            <li class="js-code-tab">W</li>
                            <li class="js-code-tab">X</li>
                            <li class="js-code-tab">Y</li>
                            <li class="js-code-tab">Z</li>
                        </ul>
                        <div class="code-title"><span>常用</span></div>
                        <!-- 地区 -->
                        <div class="code-list nano has-scrollbar">
                            <ul class="nano-content js-code-list">
                                <li>中国澳门（+853 ）</li>
                                <li>中国台湾（+886 ）</li>
                                <li>中国香港（+852 ）</li>
                                <li>中国大陆（+86 ）</li>
                                <li>美国（+1 ）</li>
                                <li>加拿大（+1 ）</li>
                                <li>日本（+81 ）</li>
                                <li>韩国（+82 ）</li>
                                <li>新西兰（+64 ）</li>
                                <li>马来西亚（+60 ）</li>
                                <li>英国（+44 ）</li>
                            </ul>

                        </div>
                    </div>
                    <!-- 
                       <div class="code-list nano has-scrollbar">
                        <ul class="nano-content js-code-list" tabindex="0" style="right: -17px;"> </ul>
                        <div class="nano-pane" style="display: none;">
                            <div class="nano-slider" style="height: 20px; transform: translate(0px, 0px);"></div>
                        </div>
                       </div>
                      </div> -->

                </div>
            </div>

            <!-- 二维码登录中间 -->

        </div>



        <!-- 底部 -->
        <div class="vright"><img class="moco-emoji" alt="©" src="./img/a9.png"> 2021 imooc.com All Rights Reserved
            京ICP备
            13046642号
        </div>
</body>

</html>